<!--  -->
<template>
  <el-container v-loading="isLoading"
   element-loading-text="加载中...">
    <el-header height="200px">
      <div class="wrap">
        <div class="img">
          <img :src="artist.picUrl" alt="" />
        </div>
        <div class="title">
          <span class="name">{{ artist.name }}</span>
          <div v-show="isShowName" class="music-name">{{ musicName }}</div>
          <div class="button">
            <el-button style="background-color: #ff3300" type="danger" round>
              <i class="el-icon-folder-add"></i>
              收藏</el-button
            >
          </div>
          <div class="count">
            <span>
              单曲数:<span>
                {{ artist.musicSize }}
              </span>
            </span>
            <span>
              专辑数:
              <span>{{ artist.albumSize }}</span>
            </span>
                        <span>
              mv数:
              <span>{{ artist.mvSize }}</span>
            </span>
          </div>
        </div>
      </div>
    </el-header>

    <el-main>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#fff"
        text-color="#333"
        active-text-color="#c32136"
      >
        <el-menu-item index="1" @click="changeIndex('1')">专辑</el-menu-item>
        <el-menu-item index="2" @click="changeIndex('2')">MV</el-menu-item>
        <el-menu-item index="3" @click="changeIndex('3')">歌手详情</el-menu-item>
        <el-menu-item index="4" @click="changeIndex('4')">相似歌手</el-menu-item>
      </el-menu>

      <Collection class="collection" v-show="activeIndex === '1'"></Collection>
      <SingerMv v-show="activeIndex === '2'"></SingerMv>
      <SingerInfo v-show="activeIndex === '3'"></SingerInfo>
      <SameSinger v-show="activeIndex === '4'"></SameSinger>
    </el-main>
  </el-container>
</template>

<script>
import Collection from "components/content/singerDetail/Collection.vue";
import SingerMv from "components/content/singerDetail/SingerMv.vue";
import SingerInfo from "components/content/singerDetail/SingerInfo.vue";
import SameSinger from "components/content/singerDetail/SameSinger.vue";
import { mapGetters } from 'vuex'


import { getSingerDetail } from "util/findMusic.js";
export default {
  name: "",
  components: {
    Collection,
    SingerMv,
    SingerInfo,
    SameSinger,
  },
      computed: {
    ...mapGetters('musicPlay', [
      // 加载状态
      'isLoading'
    ])
  },
  data() {
    return {
      currentId: null,
      artist: { picUrl: "", name: "", musicSize: "", albumSize: "" },
      isShowName: false,
      musicName: "",
      activeIndex: "1",
    };
  },
  created() {
    this.currentId = this.$route.params.id;
    this.getSingerDetail();
  },
  methods: {
    async getSingerDetail() {
      this.$store.dispatch('musicPlay/changeIsLoading', true)

      let {
        data: { artist },
      } = await getSingerDetail(this.currentId);
      this.artist = artist;
      // console.log(this.currentId);
      // console.log(artist);

      if (artist.alias[0]) {
        this.isShowName = true;
        this.musicName = artist.alias[0];
      }
      this.$store.dispatch('musicPlay/changeIsLoading', false)

    },
    changeIndex(index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style scoped>
.el-header {
  margin-top: 20px;
}
.el-main {
  padding: 0;
}
.el-tag {
  color: #fff;
}
.wrap {
  padding: 0 15px;
  display: flex;
}

.wrap .img {
  width: 190px;
  height: 190px;
  background: #bfa;
}
.wrap .img img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.wrap .title {
  margin-left: 20px;
}
.wrap .title .name {
  display: inline-block;
  margin-left: 10px;
  font-weight: 600;
  font-size: 25px;
}
.wrap .title .music-name {
  margin-left: 10px;
  margin-top: 5px;
  font-size: 13px;
}
.wrap .title .button {
  margin-top: 15px;
}
.el-button {
  margin-right: 10px;
  padding: 10px 30px;
  height: 35px;
}
.count {
  margin-top: 20px;
  font-size: 13px;
}
.count > span {
  margin-right: 15px;
}

.collection {
  margin-left: 20px;
}
</style>